<!-- 到期设备 -->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-divider content-position="left">告警配置</el-divider>
    </div>
    <div class="searchs">
      <div>
        <span>
          告警名称:
        </span>
        <el-input v-model="queryParams.alarmName" placeholder="请输入告警名称" style="width: 200px;" />
      </div>
      <!-- <div>
        <span>
          位号名称:
        </span>
        <el-input v-model="search.name" placeholder="请输入位号名称" style="width: 200px;" />
      </div> -->
    </div>
    <div class="searchs">
      <el-button type="success" plain icon="back" @click="comeBack">返回</el-button>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="queryParams.alarmName=''">重置</el-button>
      <el-button type="warning" plain icon="select">完成</el-button>
    </div>
    <div class="addType">
      <el-button type="primary" icon="plus" @click="addPageQuery">添加</el-button>
      <pagination @pagination="handleQuery" v-if="queryParams.pages.total > 0" v-model:total="queryParams.pages.total"
        v-model:page="queryParams.pages.current" v-model:limit="queryParams.pages.size" />
    </div>
    <el-table v-loading="loading" :data="pageData">
      <el-table-column label="信号量" align="center" prop="alarmCode" />
      <el-table-column label="告警名称" align="center" prop="alarmName" />
      
      <el-table-column label="等级" align="center" prop="level">
        <template #default="{ row }">
          <span>
            {{ row.level === 'LEVEL_ONE' ? '一级告警' : 
               row.level === 'LEVEL_TWO' ? '二级告警' : 
               row.level === 'LEVEL_THREE' ? '三级告警' : 
               row.level === 'LEVEL_FOUR' ? '四级告警' : 
           '' }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="设备类型" align="center" prop="deviceTypeId" /> -->

      <el-table-column label="操作" align="center" fixed="right" width="220">
        <template #default="scope">
          <el-button title="编辑" type="primary" icon="edit" circle @click.prevent="editRow(scope.row)" />
          <el-button title="删除" type="danger" icon="delete" circle @click.prevent="deleteRow(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog destroy-on-close class="dialogTableVisibleclass" v-model="outerVisible" title="新增告警信息">
      <div class="div-container">
        <el-form ref="AddruleFormRef" :rules="rules" :model="addDeviceType" label-width="auto" style="width: 600px"
          class="form-container">
          <el-form-item label="告警名称" prop="alarmName">
            <el-input v-model="addDeviceType.alarmName" />
          </el-form-item>
          <el-form-item label="告警编码" prop="alarmCode">
            <el-input v-model="addDeviceType.alarmCode" />
          </el-form-item>
          <!-- <el-form-item label="设备类型" prop="deviceTypeId">
            <el-select v-model="addDeviceType.deviceTypeId" placeholder="请选择" size="large">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="告警等级" prop="level">
            <el-select v-model="addDeviceType.level" placeholder="请选择" size="large">
              <el-option v-for="item in levelList" :key="item.value" :label="item.lable" :value="item.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="参数名称" prop="displayTypeItem">
            <el-input v-model="addDeviceType.displayTypeItem" />
          </el-form-item> -->
          <!-- <el-form-item label="参数类型" prop="displayTypeFlag">
            <el-select v-model="addDeviceType.displayTypeFlag" placeholder="请选择" size="large">
              <el-option v-for="item in displayTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="数据精度" prop="valueDecimal">
            <el-input v-model="addDeviceType.valueDecimal" />
          </el-form-item>
          <el-form-item label="单位">
            <el-input v-model="addDeviceType.unit" />
          </el-form-item>
          <el-form-item label="基础值">
            <el-input v-model="addDeviceType.baseValue" />
          </el-form-item>
          <el-form-item label="比例系数">
            <el-input v-model="addDeviceType.multiple" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="addDeviceType.remark" type="textarea" />
          </el-form-item> -->
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="outerVisible = false">关闭</el-button>
          <el-button type="primary" @click="addSave(AddruleFormRef)">增加</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog destroy-on-close class="dialogTableVisibleclass" top="5vh" v-model="outerVisibleEdit" title="编辑告警信息"
      width="80vw">
      <div class="div-container">
        <el-form ref="EditruleFormRef" :rules="rules" :model="editDeviceType" label-width="auto" style="width: 600px"
          class="form-container">
          <el-form-item label="告警名称" prop="alarmName">
            <el-input v-model="editDeviceType.alarmName" />
          </el-form-item>
          <el-form-item label="告警编码" prop="alarmCode">
            <el-input v-model="editDeviceType.alarmCode" />
          </el-form-item>
          <!-- <el-form-item label="设备类型" prop="deviceTypeId">
            <el-select v-model="editDeviceType.deviceTypeId" placeholder="请选择" size="large">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="告警等级" prop="level">
            <el-select v-model="editDeviceType.level" placeholder="请选择" size="large">
              <el-option v-for="item in levelList" :key="item.value" :label="item.lable" :value="item.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="参数名称" prop="displayTypeItem">
            <el-input v-model="editDeviceType.displayTypeItem" />
          </el-form-item> -->
          <
          <!-- <el-form-item label="数据精度" prop="valueDecimal">
            <el-input v-model="editDeviceType.valueDecimal" />
          </el-form-item>
          <el-form-item label="单位">
            <el-input v-model="editDeviceType.unit" />
          </el-form-item>
          <el-form-item label="基础值">
            <el-input v-model="editDeviceType.baseValue" />
          </el-form-item>
          <el-form-item label="比例系数">
            <el-input v-model="editDeviceType.multiple" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="editDeviceType.remark" type="textarea" />
          </el-form-item> -->
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="outerVisibleEdit = false">关闭</el-button>
          <el-button type="primary" @click="editSave(EditruleFormRef)">编辑</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "profile",
  inheritAttrs: false,
});
import managerAlarmApi,{ GetHistoricalDataParams,alarmtype } from '@/api/manageralarm'
import { useRoute, useRouter } from 'vue-router'
import PointApi, { DeviceTypeReq, LogPageQuery } from "@/api/point";
import pointGroupApi from "@/api/pointGroup";
import DeviceTypeApi, { typeOptions } from "@/api/deviceType"

import type { FormInstance, FormRules } from 'element-plus'
let deviceTypeId = ref('');
let pointGroupID = ref('')
const route = useRoute()
const router = useRouter()
if (route.query.deviceTypeId) {
  deviceTypeId.value = route.query.deviceTypeId as string
  pointGroupID.value = route.query.pointGroupID as string
}



let addDeviceType = reactive<alarmtype>({
  //  "id": '',
  "alarmName": '',
  "alarmCode": '',
  "level": '',
  "deviceTypeId": deviceTypeId.value
});
let restDeviceType = reactive<alarmtype>({
   "id": '',
  "alarmName": '',
  "alarmCode": '',
  "level": '',
  "deviceTypeId": deviceTypeId.value
});
const AddruleFormRef = ref<FormInstance>()
const EditruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<alarmtype>>({
  alarmName: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  alarmCode: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  // deviceTypeId: [
  //   { required: true, message: '请选择', trigger: 'change' },
  // ],
  level: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  // displayTypeFlag: [
  //   { required: true, message: '请选择', trigger: 'change' },
  // ],
  // displayTypeItem: [
  //   { required: true, message: '请选择', trigger: 'blur' },
  // ],
  // remark: [
  //   {
  //     required: true,
  //     message: 'Please select activity resource',
  //     trigger: 'blur',
  //   },
  // ],
})



const displayTypeList = [
  {
    value: 'STRING',
    label: '字符串',
  },
  {
    value: 'BUTTON',
    label: '按钮',
  },
  {
    value: 'OPTION',
    label: '下拉框',
  },
  {
    value: 'CURVE',
    label: '曲线',
  },
]

let editDeviceType = reactive<alarmtype>({
   "id": '',
  "alarmName": '',
  "alarmCode": '',
  "level": '',
  "deviceTypeId": deviceTypeId.value
});
/**
@date: 2024-08-31 14:55:16
新增电子围栏
*/
let outerVisible = ref(false);
/**
@date: 2024-08-31 14:55:01
编辑电子围栏
*/
let outerVisibleEdit = ref(false);
const loading = ref(false);
let pageData = ref()
/**
@date: 2024-09-06 16:28:24
位号组列表
*/
let levelList = ref([{
  "lable": "一级告警",
  "value": "LEVEL_ONE"
},
{
  "lable": "二级告警",
  "value": "LEVEL_TWO"
},
{
  "lable": "三级告警",
  "value": "LEVEL_THREE"
},
{
  "lable": "四级告警",
  "value": "LEVEL_FOUR"
}])
/** 用户查询参数  */
let queryParams = reactive<GetHistoricalDataParams>({
  "pages": {
    "current": 1,
    "size": 10,
    total:0,
    "startTime": undefined,
    "endTime": undefined,
    "orders": [
      {
        "column": undefined,
        "asc": true
      }
    ]
  },
  "alarmName": undefined,
  "alarmCode": undefined,
  "level": undefined
});
/** 查询 */
function handleQuery() {
  loading.value = true;
  
  managerAlarmApi.alarmpage(queryParams)
    .then((data) => {
      pageData.value = data.records;
      queryParams.pages.total = data.total;
      queryParams.pages.current = data.current;
    })
    .finally(() => {
      loading.value = false;
    });
}
function addPageQuery() {
  outerVisible.value = true

  deviceTypeOptions()
}


let options = reactive<typeOptions[]>([{
  "label": 'test',
  "value": "1"
}]);

/** 查询设备类型下拉列表 */
function deviceTypeOptions() {
  DeviceTypeApi.deviceTypeOptions()
    .then((data) => {
      options = data;
      
      // filters.deviceTypeId = data[1].value;
    })
    .finally(() => {
    });
}


/**
@date: 2024-09-04 17:09:35
添加位号
*/
const addSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      managerAlarmApi.alarmsave(addDeviceType)
        .then((data) => {
          console.log(data);
          handleQuery();
          addDeviceType=restDeviceType
        })
        .finally(() => {
          outerVisible.value = false
          addDeviceType=restDeviceType

        });
    } else {
      console.log('error submit!', fields)
    }
  })
}

function editRow(datas: any) {
  console.log(datas,'----');
  
  outerVisibleEdit.value = true
  Object.assign(editDeviceType, { ...datas });
  // pointGroupList()
}
/**
@date: 2024-08-31 14:23:01
编辑电子围栏
*/
const editSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      managerAlarmApi.alarmupdate(editDeviceType)
        .then((data) => {
          handleQuery();
          ElMessage.success('编辑成功');
          outerVisibleEdit.value = false
        })
        .finally(() => {
          outerVisibleEdit.value = false

        });
    } else {
      console.log('error submit!', fields)
    }
  })
}
/**
@date: 2024-08-31 14:22:46
删除电子围栏
*/
function deleteRow(datas: any) {
  managerAlarmApi.alarmdelete(datas.id)
    .then((data) => {
      console.log('添加', data);
      handleQuery();
      ElMessage.success('删除成功');
    })
    .finally(() => {
    });
}
function comeBack() {
  router.go(-1)
}
onMounted(() => {
  handleQuery();
});
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 10px;

  :deep(.form-container) {
    .el-select__selected-item {
      span {
        color: #333;
      }
    }

    .el-form-item__label {
      color: #333;
    }

    .el-input__inner {
      color: #333;
    }

    .el-textarea__inner {
      color: #333;

    }
  }
}

.searchs {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.addType {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
}
</style>
